<template>
  <div class="container">
    <div class="search-box">
      <van-search
        :value='keyword'
        placeholder="点击输入搜索内容"
        use-action-slot
        shape="round"
        @change="onChangeVal"
        @search="onSearch"
        :autofocus="true"
        ref="searchBox"
      >
        <div class="search-btn" size="small" slot="action" @tap="onSearch2">搜索</div>
      </van-search>
    </div>
    <div class="height-44"></div>
    <div class="goods-bar">
      <div class="goods-card">
        <div class="goods-item mar-t-10" 
          v-for="(item,index) in listData" :key="index" 
          @click="pageTo(item)">
          <div class="width-123 height-123"><img :src="item.mainImage" v-if="item.mainImage" alt="" class="width-123 height-123"></div>
          <div class="goods-content mar-l-9">
            <div class="goods--title__row line-1">
              <span class="goods-tag" v-if="item.anchorGoodsStatus === 2">免费寄样</span>
              {{item.title}}
            </div>
            <div class="goods-sell font-11 mar-t-5">
              <span class="font-color-9">已售<span class="color-num">{{item.salesNum}}</span>{{item.unit}}</span>
              <div class="dividing mar-l-5 mar-r-5"></div>
              <span class="font-color-6">{{item.anchorSalePeople}}位网红在卖</span>
            </div>
            <div class="height-17 mar-t-3">
              <div class="v-align-c font-11 font-color-9" 
                v-if="item.tiktokAuthority || item.quickAuthority || item.anchorPlatformShopType || item.taobaoAuthority">
                <span>支持</span>
                <img
                  v-if="fileSpace && item.tiktokAuthority"
                  :src="fileSpace + '/images/auchor-tiktok-icon.png'"
                  class="width-14 height-14 radius-4 mar-l-4"
                  alt="">
                <img
                  v-if="fileSpace && item.quickAuthority"
                  :src="fileSpace + '/images/auchor-quick-icon.png'"
                  class="width-14 height-14 radius-4 mar-l-4"
                  alt="">
                <img
                  v-if="fileSpace && item.anchorPlatformShopType"
                  :src="fileSpace + '/images/auchor-wechat-icon.png'" 
                  class="width-14 height-14 radius-4 mar-l-4" 
                  alt="" />
                <img
                  v-if="fileSpace && item.taobaoAuthority"
                  :src="fileSpace + '/images/auchor-taobao-icon.png'"
                  class="width-14 height-14 radius-4 mar-l-4"
                  alt="">
              </div>
            </div>
            <div class="flex flex-between mar-t-5">
              <div>
                <div class="color-num font-11">{{ anchored ? '￥' : '' }}<span class="font-16">{{ anchored ? item.income : '***' }}</span></div>
                <div class="font-11 mar-t--2" style="color:#F82A37">预计赚</div>
              </div>
              <div class="font-color-9">
                <div class="font-16">{{ anchored ? item.anchorRatio : '***'}}{{anchored ? '%' : ''}}</div>
                <div class="font-11 mar-t--2">佣金比例</div>
              </div>
              <div class="font-color-9">
                <div class=" font-11">{{ anchored ? '￥' : '' }}<span class="font-16">{{ anchored ? item.sellPrice : '***' }}</span></div>
                <div class="font-11 mar-t--2">观众购买价</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="nodata" v-if="nodata">
        <img v-if="fileSpace" :src="fileSpace + '/images/anchor-nodata.png'" class="width-205 height-173" alt="">
        <div class="align-c mar-t-20 font-16 font-color-9">
        暂时还没有您搜索的内容~
        </div>
    </div>
  </div>
</template>
<script>
import { searchAnchorGoods } from '@/api/home'
export default {
  data() {
    return {
      pullLoad: {
        loading: false,
        finished: false
      },
      keyword: '',
      listData: [],
      currentPage: 1,
      nodata: false
    }
  },
  computed: {
    anchored() {
      return this.getCustomerId && this.getAnchorType
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.searchAnchorGoods()
    }
  },
  methods: {
    searchAnchorGoods() {
      let params = {
        keyword: this.keyword,
        size: 10,
        currentPage: this.currentPage,
        customerId: this.getCustomerId,
        roleType: this.getRoleType ? this.getRoleType : ''
      }
      searchAnchorGoods(params).then(response => {
        if (response.isError) return
        if (response.data.total === 0) {
          this.nodata = true
          this.pullLoad.finished = true
          return
        }
        response.data.records.forEach(item => {
          // 网红在卖人数
          item.anchorSalePeople = item.putawayNum + item.virtualPutawayNum
          this.listData.push(item)
        })
        this.currentPage++
        if (this.listData.length === 0 || this.listData.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    },
    resetData() {
      // 重置数据
      this.nodata = false
      this.pullLoad.finished = false
      this.currentPage = 1
      this.listData = []
    },
    onSearch(e) {
      // 键盘直接搜索点击事件
      this.keyword = e.mp.detail
      this.resetData()
      this.searchAnchorGoods()
    },
    onChangeVal(e) {
      this.keyword = e.mp.detail
    },
    onSearch2() {
      // 搜索按钮点击事件
      this.resetData()
      this.searchAnchorGoods()
    },
    pageTo(item) {
      // 跳转详情页
      this.$pt.navigateTo({url: `/pages/shop/detail/main?goodsId=${item.goodsId}&goodsType=${item.goodsType}`})
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  min-height: 100vh;
  background: white;
}
.search-box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  z-index: 9;
  // 对搜索框进行改造
  /deep/ .van-search--show-action {
    background: unset !important;
    padding-right: unset;
  }
  /deep/ .van-cell {
    background: #f4f4f4;
    border-radius: 25px;
  }
  /deep/ .van-search__action {
    background: white;
    font-size: 20px;
    color: #333333;
    font-weight: bold;
  }
}
.goods-bar{
  padding: 0 15px 15px;
  .goods-card{
    .goods-item{
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      overflow: hidden;
      border-radius: 5px;
      .goods-content{
        flex: 1;
        padding-top: 11px;
        .goods--title__row{
          font-size: 15px;
          font-weight: bold;
          height: 15px;
          line-height: 15px;
          .goods-tag{
            color: #F8303D;
            background-color: rgba(248, 48, 61, .1);
            border-radius: 2px;
            font-size: 11px;
            padding: 1px 3px;
            margin-right: 3px;
          }
        }
        .goods-sell{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .dividing{
            width: 0.5px;
            height: 10px;
            background-color: #CCCCCC;
          }
        }
        .color-num{
          color: #F8303D;
        }
      }
    }
  }
}
.nodata {
  margin-top: 85px;
  img{
    margin: 0 auto;
  }
}
</style>
